import React, { Fragment } from "react";
import { Button, Table, DatePicker } from "antd";
import css from "styled-jsx/css";

import { withModal, mountModal } from "vendor/components/pro-hoc/withModal";
import Dialog from "./Dialog";

const AntdTheme: React.FC = () => {
  // const a: number = "121"
  return <Fragment >
    <DatePicker />
    <TestBtn />
    <TestTable />
  </Fragment>
}

export default AntdTheme;

const TestBtn: React.FC = () => {
  const handleClick = () => {
    const DialogModal = withModal(Dialog);
    mountModal(<DialogModal />)
  }

  return <Button type="primary" style={{ marginBottom: 5 }} onClick={handleClick}>弹出消息</Button>
}

const TestTable: React.FC = () => {
  const dataSource = [
    {
      key: '1',
      name: '胡彦斌',
      age: 32,
      address: '西湖区湖底公园1号',
    },
    {
      key: '2',
      name: '胡彦祖',
      age: 42,
      address: '西湖区湖底公园1号',
    },
  ];

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    },
  ];

  // 覆盖ant中的样式
  // language=SCSS
  // const {className, styles} = css.resolve`.sk-table{
  const { className } = css.resolve`.sk-table{
      :global(.ant-table){
        background: rebeccapurple;
      }
    }`

  return <Fragment>
    <Table size="small" className={`sk-table ${className}`} dataSource={dataSource} columns={columns} />
    {/*{styles}*/}
  </Fragment>
}
